$(".category div").click(function(e){
    // $(this).addClass("active").siblings().removeClass("active");
    e = e || window.event;
    e.stopPropagation();
    var index = $(this).index();
    var flag = $(".panelWrap").attr("flag");
    var positionFlag = $(".positionWrap").attr("flag");
    if (flag == "false") {
        $(".panelWrap").css({ "bottom": "-15rem", "display": "block" }).animate({ "bottom": "0.8rem" });
        $(".positionWrap").animate({ "top": 0 });
        $(".positionWrap").attr("flag", "true");
        $(".panelWrap").attr("flag", "true");
    }
    $('.panelWrap .panel' + index)
        .css({
            "display": "block"
        })
        .siblings().css({
            "display": "none"
        });
});

var province = "浙江";
var city = "杭州";
var dataCache = {};

function getCity(lastDataHeight) {
    var data = [{
            "city": "周口2",
            "num": "20家"
        },
        {
            "city": "郑州2",
            "num": "20家"
        },
        {
            "city": "上水",
            "num": "20家"
        },
        {
            "city": "漯河",
            "num": "20家"
        },
        {
            "city": "开封",
            "num": "20家"
        },
        {
            "city": "平顶山",
            "num": "20家"
        },
        {
            "city": "驻马店",
            "num": "20家"
        },
    ];
    dataCache[province] = data;
    move(dataCache[province], lastDataHeight);
}

function move(data, lastDataHeight) {
    var html = "<ul>";
    data.forEach(function(item) {
        var li = "<li><span >"+item.city+"</span><b>"+item.num+"</b></li>";
        html += li;
    });
    html += "</ul>";
    $(".panel0 .city").append(html);
    $(".panel0 .city").animate({ top: -lastDataHeight }, function() {
        $(".panel0 .city").children("ul").eq(0).remove();
        $(".panel0 .city").css({ "top": 0 });
    });
};

// province 
$(".panel0 .province li").click(function(e) {
    e = e || window.event;
    e.stopPropagation();
    var lastDataHeight = $(".panel0 .city ul").eq(0).height();
    province = $(this).html();
    $(this).addClass("active").siblings().removeClass("active");
    if (dataCache[province]) {
        move(dataCache[province], lastDataHeight);
    } else {
        getCity(lastDataHeight);
    }
});

//  面板消失
function hidenPanelWrap() {
    $(".panelWrap").animate({ "bottom": "-15rem" }, function() {
        $(".panelWrap").css({ "display": "none" });
    });
    $(".positionWrap").animate({ "top": "20rem" });
    $(".panelWrap").attr("flag", "false");
    $(".positionWrap").attr("flag", "false");
}

$(".panel0 .city").on("click", "li", function() {
    
    $(this).addClass("active").siblings().removeClass("active");
    city = $(this).children("span").html();
    // $(".currentPositionCity").html(province + " " + city );
    $(".currentPosition span").html(city);
    hidenPanelWrap();
});

$(".panel1 ").on("click", "li", function() {
    var hospital = $(this).html();
    $(this).addClass("active").siblings().removeClass("active");
    hidenPanelWrap();
});
$(".positionWrap ").on("click", function() {
    hidenPanelWrap();
});